<template>
  <div v-show="show" :class="ui.wrapper" v-bind="attrs">
    <NuxtImg :src="emptyImg"></NuxtImg>
    <span :class="ui.container">
      {{ title }}
    </span>
  </div>
</template>

<script setup lang="ts">
  const config = {
    wrapper: 'flex justify-center items-center w-full flex-col mt-10',
    container: 'text-slate-500 mt-8'
  }
  const props = defineProps({
    title: {
      type: String,
      default: '暂无数据'
    },
    emptyImg: {
      type: String,
      default: 'https://blog-la.oss-cn-hangzhou.aliyuncs.com/blog/assets/empty.png'
    },
    show: {
      type: Boolean,
      default: true
    },
    class: {
      type: [String, Object, Array] as PropType<any>,
      default: undefined
    }
  })
  const { ui, attrs } = useUI('content.empty', undefined, config, toRef(props, 'class'), true)
</script>
